<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;"/>

    <el-tree
      ref="tree2"
      :data="subjectList"
      :props="defaultProps"
      node-key="id"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
      :expand-on-click-node="false"
    >
      <div slot-scope="{ node, data }" style="width:100%" @mouseenter="mouseEnter(data)" @mouseleave="mouseleave(data)">
        <span>{{ node.label }}</span>
        <span style="position: absolute;right: 10px;" v-if="data.isShow">
            <i class="el-icon-edit-outline" title="编辑" @click="editSubject($event, data, node)"
               style="color: #20a0ff"></i>
            <i class="el-icon-delete" title="删除" @click="deleteSubjectById(data.id)"
               style="margin-left: 10px;color: #20a0ff" v-if="node.childNodes.length==0"></i>
            <i class="el-icon-circle-plus-outline" title="新增同级" @click="addSubject($event, data, node)"
               style="margin-left: 10px;color: #20a0ff"></i>
           </span>
      </div>
    </el-tree>
    <el-dialog :close-on-click-modal="false"  :title="!isEdit?'新增课程分类':'修改课程分类'" :visible.sync="dialogFormShow">
      <el-form :model="subjectForm" :rules="subjectRules" ref="subjectForm">
        <el-form-item label="上级分类名称" label-width="120px" prop="parentSubjectName">
          <el-input v-model="subjectForm.parentSubjectName" style="width: 500px" disabled></el-input>
        </el-form-item>
        <el-form-item label="分类名称" label-width="120px" prop="title">
          <el-input v-model="subjectForm.title" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="排序" label-width="120px" prop="sort">
          <el-input-number v-model="subjectForm.sort" :min="0" :max="10" label="排序"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormShow = false">取 消</el-button>
        <el-button type="primary" @click="saveSubject" v-loading.fullscreen="fullscreenLoading">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getSubjectList, deleteSubjectById, updateSubject, createSubject} from '@/api'

export default {

  data() {
    return {
      fullscreenLoading: false,
      isEdit: false,
      dialogFormShow: false,
      subjectRules: {
        title: [
          {required: true, message: '必填', trigger: 'blur'}
        ],
      },
      subjectForm: {
        title: '',
        parentId: '',
        sort: 0
      },
      filterText: '',
      subjectList: [],  //返回所有分类数据
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  created() {
    this.getAllSubjectList()
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },

  methods: {

    mouseEnter(data) {
      data.isShow = true
    },
    mouseleave(data) {
      data.isShow = false
    },
    deleteSubjectById(id) {
      this.$confirm("此操作将永久删除该课程分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteSubjectById(id).then(e => {
          if (e.code == '20000') {
            this.$message({
              message: e.message,
              type: 'success'
            })
            this.getAllSubjectList()
          } else {
            this.$message({
              message: e.message,
              type: 'error'
            })
          }
        }).finally(e => {

        })
      })
    },
    saveSubject() {
      let post = this.isEdit ? updateSubject : createSubject
      this.$refs.subjectForm.validate((bool) => {
        if (bool) {
          this.fullscreenLoading = true
          post(this.subjectForm).then(data => {
            if (data) {
              if (data.code == '20000') {
                this.$message({
                  message: data.message,
                  type: 'success'
                })
                this.getAllSubjectList()
              } else
                this.$message({
                  message: data.message,
                  type: 'error'
                })
            } else
              this.$message({
                message: data.message,
                type: 'error'
              })
          }).finally(e => {
            this.dialogFormShow = false
            this.fullscreenLoading = false
          })
        }
      })
    },
    editSubject(event, data, node) {
      let parentNode = this.$refs.tree2.getNode(data.parentId)
      this.subjectForm = data
      //上级分类名称赋值
      if(parentNode == null){
        this.subjectForm.parentSubjectName = '无'
      }else{
        this.subjectForm.parentSubjectName = parentNode.data.title
      }
      this.isEdit = true
      this.dialogFormShow = true
    },
    addSubject(event, data, node) {
      let parentNode = this.$refs.tree2.getNode(data.parentId)
      this.subjectForm = {
        title: '',
        parentId: '',
        sort: '0'
      }
      //上级分类名称赋值
      if(parentNode == null){
        this.subjectForm.parentSubjectName = '无'
      }else{
        this.subjectForm.parentSubjectName = parentNode.data.title
      }
      this.subjectForm.parentId = data.parentId
      this.isEdit = false
      this.dialogFormShow = true
    },
    getAllSubjectList() {
      getSubjectList()
        .then(response => {
          this.subjectList = response.data.list
        })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
    }
  }
}
</script>
